<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>红彤光伏</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/pure-min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/day_use.css">
</head>
<body>

<div class="g-header">
    <h1><img src="img/top_1_03.png">用电量查询</h1>
</div>

<div class="container">
    <div class="tabbar">
        <div class="weui_tab">
            <div class="weui_tab_bd">

                <div class="pure-g items">
                    <div class="pure-u-1-2">
                        <div class="item">
                            今日用电量
                            <span class="gen">50</span>
                        </div>
                    </div>
                    <div class="pure-u-1-2">
                        <div class="item">
                            本月用电量
                            <span class="use">60</span>
                        </div>
                    </div>
                </div>

                <div class="weui_cells">
                    <div class="all"><img class="j-icon"src="img/gg_82.png">历史用电量： <span>5000</span> kWh</div>
                </div>


                <div class="weui_cells_title">本月峰谷用电比例</div>

                <div class="echart" style=" background: #fff; padding: 1em .5em;">
                    <div id="echart-2" style="width: 100%; height: 300px;"></div>
                </div>

                <div class="weui_cells_title">日用电量统计</div>


                <div class="echart" style=" background: #fff; padding: 1em .5em; margin-bottom: 5em;">
                    <div id="echart-1" style="width: 100%; height: 300px;"></div>
                </div>

            </div>

            <div class="weui_tabbar">
                <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
                    <div class="weui_tabbar_icon">
                        <img src="img/icon_nav_button.png" alt="">
                    </div>
                    <p class="weui_tabbar_label">营业厅</p>
                </a>
                <a href="javascript:;" class="weui_tabbar_item">
                    <div class="weui_tabbar_icon">
                        <img src="img/icon_nav_msg.png" alt="">
                    </div>
                    <p class="weui_tabbar_label">电量查询</p>
                </a>
                <a href="javascript:;" class="weui_tabbar_item">
                    <div class="weui_tabbar_icon">
                        <img src="img/icon_nav_article.png" alt="">
                    </div>
                    <p class="weui_tabbar_label">红彤光伏</p>
                </a>
                <a href="javascript:;" class="weui_tabbar_item">
                    <div class="weui_tabbar_icon">
                        <img src="img/icon_nav_cell.png" alt="">
                    </div>
                    <p class="weui_tabbar_label">我</p>
                </a>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>

<script>
    $(function(){
        var option = option = {
            title: {
                text: '日用电量统计'
            },
            tooltip : {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['5-01','5-01','5-01','5-01','5-01','5-01','5-01']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'日用电量（kWh）',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[150, 232, 201, 154, 190, 330, 410]
                }
            ]
        };



        var echart = echarts.init(document.getElementById('echart-1'));
        echart.setOption(option);

    });

    $(function(){
        var option = {
            title : {
                text: '峰谷电比例',
                subtext: '本月',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:50, name:'峰电用电量'},
                        {value:310, name:'谷电用电量'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        var echart = echarts.init(document.getElementById('echart-2'));
        echart.setOption(option);

    });
</script>

</body>
</html>